<!-- 登录页风格切换页 -->
<template>
  <div class="login-style">
    <el-form :model="detail" label-width="auto" :disabled="disabled">
      <el-form-item label="风格选择">
        <el-radio-group v-model="detail.style" @change="onChange">
          <el-radio v-for="item in styleList" :label="item.key">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="主题色">
        <el-color-picker v-model="detail.themeColor" @change="onChange" />
        <span class="label-value">{{ detail.themeColor }}</span>
      </el-form-item>
      <el-form-item label="输入框背景色" v-if="detail.style == 1">
        <el-color-picker v-model="detail.inputBgColor" @change="onChange" />
        <span class="label-value">{{ detail.inputBgColor }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { newRandomUid } from "@/utils";
const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
  },
});
const form = ref({
  $position: { top: 0, left: 0 },
  $size: { width: 375, height: 350 },
  $removeable: true,
  $positionType: "relative",
  style: 1,
  themeColor: "#546AD5",
  inputBgColor: "#FFFFFF"
});

const emits = defineEmits(["update:config", "change", "append"]);
const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const styleList = [
  { label: "风格1", key: 1 },
  { label: "风格2", key: 2 },
];



const onChange = () => {
  detail.value = detail.value;
};

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Login-${newRandomUid()}`;
  }
  let loginBtn = (props.info.children || []).find(
    (item) => (item.type === "LoginStyleBtn")
  );
  if (!loginBtn) {
    emits("append", {
      uid: newRandomUid(),
      type: "LoginStyleBtn",
      name: "登录按钮",
      pageConfig: {
        $removeable: false,
        text: '登录',
        $position: { top: 200, left: 80 },
        btnType: 'login',
      },
    });
  }
}

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

</script>
<style lang="scss" scoped></style>